<template>
	<div class="login-box">
		<!-- 头部 -->
		<TopTab :topTabTitle="topTabTitle"></TopTab>
		<!-- 内容 -->
		<div class="content">
			<!-- 手机号 -->
			<div class="input">
				<MyInput :maxlength="'11'" :title="'手机号'" :placeholder="'填写11位手机号'" @inputBlur="getPhone"></MyInput>
				<span @click="setDynamic">{{ dynamicTimt > 0 ? dynamicTimt + 's重新获取' : '获取验证码' }}</span>
			</div>
			<!-- 动态码框 -->
			<div class="input"><MyInput :maxlength="'6'" :title="'动态码'" :placeholder="'填写收到的手机动态码'" @inputBlur="getDynamic"></MyInput></div>
			<!-- 密码框 -->
			<div class="input"><MyInput :title="'密码'" :placeholder="'设置密码'" :type="'password'" @inputBlur="getPwd"></MyInput></div>

			<button @click="reg">立即注册</button>

			<router-link class="kipt-a" to="/login">我已有账号，点此登录</router-link>
		</div>
		<!-- 错误提示框 -->
		<div class="tips-box" v-show="isDetermine" @click="determine">
			<div class="tips">
				<p>{{ determineTitle }}</p>
				<button @click="determine">确定</button>
			</div>
		</div>
	</div>
</template>

<script>
import TopTab from '@/components/topTab.vue';
import MyInput from '@/components/myInput.vue';
export default {
	name: 'login',
	data() {
		return {
			topTabTitle: '会员注册', //页面标题
			toFullPath: '', //上一个页面
			pwdShow: false, //密码显隐
			isNoPwd: false, //免密登录
			isDetermine: false, //错误提示
			determineTitle: '', //错误提示标题
			dynamicTimt: -1, //验证码有效时间
			dynamicAuto: null, //验证码倒计时
			user: {
				userName: '',
				phone: '',
				pwd: ''
			},
			dynamic: '809527' //验证码
		};
	},
	methods: {
		/* 生成动态码 */
		setDynamic() {
			if (this.user.phone == '') {
				this.isDetermine = true;
				this.determineTitle = '请输入11位手机号';
			} else {
				if (/^1[3456789]\d{9}$/.test(this.user.phone)) {
					if (this.dynamicAuto == null) {
						this.dynamicTimt = 120;
						// 验证码倒计时
						this.dynamicAuto = setInterval(() => {
							this.dynamicTimt -= 1;
							if (this.dynamicTimt <= 0) {
								clearInterval(this.dynamicAuto);
							}
						}, 1000);
						// 验证码发送
						this.isDetermine = true;
						this.determineTitle = '验证码已发送';
					} else {
						if (this.dynamicTimt >= 0) {
							// 重复发送验证码
							this.isDetermine = true;
							this.determineTitle = '同一个手机号请勿在两分钟内重复获取';
						}
					}
				} else {
					//验证错误
					this.isDetermine = true;
					this.determineTitle = '短信发送失败！';
				}
			}
		},

		/* 获取手机号 */
		getPhone(res) {
			this.user.phone = res;
		},

		/* 获取动态码 */
		getDynamic(res) {
			this.dynamic = res;
		},

		/* 获取密码 */
		getPwd(res) {
			this.user.pwd = res;
		},

		/* 密码显隐 */
		pwdSH() {
			this.pwdShow = !this.pwdShow;
		},

		/* 免密登录 */
		noPwd() {
			this.isNoPwd = !this.isNoPwd;
		},

		/* 找回密码 */
		retrieve() {},

		/* 提示框确定 */
		determine() {
			this.isDetermine = false;
		},

		/* 注册按钮 */
		reg() {
			if (this.user.pwd == '') {
				this.isDetermine = true;
				this.determineTitle = '密码必填！';
			} else if (this.user.phone == '') {
				this.isDetermine = true;
				this.determineTitle = '手机号必填！';
			} else if (/^1[3456789]\d{9}$/.test(this.user.phone) && this.dynamic == '809527') {
				let olUserList = JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')) : [];
				var newUser = true;
				
				/* 判断用户是否已存在 */
				for(var i=0; i<olUserList.length; i++){
					if (olUserList[i].phone == this.user.phone) {
						newUser = false;
						break;
					} else {
						newUser = true;
					}
				}
				if (newUser) {
					olUserList = [...olUserList, this.user];
					localStorage.setItem('userInfo', JSON.stringify(olUserList));
					this.$router.push('/login');
				} else {
					this.isDetermine = true;
					this.determineTitle = '该手机号已经被注册！';
				}
			} else {
				this.isDetermine = true;
				this.determineTitle = '手机号或验证码错误！';
			}
		}
	},
	created() {
		this.toFullPath = localStorage.getItem('toFullPath');
	},
	mounted() {
		document.querySelector('.login-box').style.height = document.documentElement.clientHeight + 'px';
		document.querySelector('.tips-box').style.height = document.documentElement.clientHeight + 'px';
	},
	components: { TopTab, MyInput },
	beforeDestroy() {
		clearInterval(this.dynamicAuto);
	}
};
</script>

<style scoped="scoped">
@import url('../css/publice.css');
.login-box {
	width: 100%;
	background-color: #f8f8f8;
}
.content {
	width: 100%;
	position: fixed;
	top: 0.92rem;
	padding-top: 0.2rem;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.input {
	width: 95%;
	position: relative;
	margin-top: 0.3rem;
}
.input span {
	width: 2rem;
	height: 0.6rem;
	position: absolute;
	right: 0.2rem;
	top: 0.15rem;
	background-color: #b4a078;
	color: white;
	font-size: 0.25rem;
	border-radius: 0.15rem;
	line-height: 0.6rem;
	text-align: center;
}
.input .pwdShow {
	background-position: 0 -11px;
}
.input .pwdHind {
	background-position: 0 -50px;
}

button {
	width: 95%;
	height: 0.8rem;
	border: none;
	margin-top: 0.2rem;
	border-radius: 0.15rem;
	background-color: #96602e;
	color: white;
	font-size: 0.32rem;
}
.kipt-a {
	margin-top: 0.3rem;
	width: 95%;
	height: 0.8rem;
	color: #0b4fb5;
	font-size: 0.23rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 错误提示框 */
.tips-box {
	width: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	z-index: 5;
}
.tips {
	width: 6rem;
	height: 2rem;
	background-color: white;
	border-radius: 0.2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.tips p {
	width: 100%;
	height: 1.1rem;
	line-height: 1.1rem;
	text-align: center;
	color: #6c6c6c;
	font-size: 0.28rem;
	border-bottom: gainsboro solid 0.01rem;
}
.tips button {
	width: 100%;
	height: 0.9rem;
	border: none;
	color: #e80018;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
</style>
